<template>
  <div class="songlist">
    <!-- 歌单页面 -->
    <!-- 下拉框 -->
    <div class="song-top">
      <el-dropdown @command="handleCommand">
        <el-button>
          {{className1}}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in songList" :key="index" :command="item.name">{{item.name}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 热门标签 -->
    <div class="hot">
      <span>热门标签:</span>
      <span v-for="(item,index) in songList" :key="index" style="margin:0px 5px" :class="className1==item.name?'red':''"
        @click="fn(item.name)">
        {{item.name}}
        <span v-if="index!=songList.length-1" style="margin:0px 5px;color:black">|</span>
      </span>
    </div>
    <!-- 音乐列表 -->
    <!-- 推荐歌单 -->
    <div class="song-list">
      <div class="music-list">
        <div class="item" v-for="(item,index) in song" :key="index">
          <img :src="item.coverImgUrl" alt="">
          <div class="list-data">{{item.name}}</div>
          <div class="play"><i class="el-icon-video-play"></i></div>
        </div>
      </div>
    </div>

    <!-- 分页显示 -->
    <div class="fenye">
          <el-pagination
             @current-change="handleCurrentChange"
             :current-page="offset"
             layout="total, prev, pager, next, jumper"
             :total="listtotal">
    </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    getclass,
    getSonglist
  } from "@/network/songlist.js"
  export default {
    name: "Songlist",
    data() {
      return {
        songList: [],
        className1: "华语",
        song: [],
        limit: 30,
        offset:1,
        listtotal:0

      }
    },
    created() {
      this.getclass1(),
        this.getSonglist1(this.limit,this.offset,"")
    },
    methods: {
      // 分页的方法
      
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.offset=val
        this.getSonglist1(this.limit,this.offset,this.className1)
      },


      // 获取分类信息
      getclass1() {
        getclass("/playlist/hot ").then(res => {
          // console.log(res.tags);
          this.songList = res.tags
        })
      },
      handleCommand(command) {
        this.className1 = command
         this.offset=1,
         this.getSonglist1(this.limit,this.offset,command)
      },
      fn(a) {
        this.className1 = a,
        this.offset=1,
        this.getSonglist1(this.limit,this.offset,a)
      },
      getSonglist1(limit,offset,cat) {
        getSonglist("/top/playlist", {
          limit: 30,
          offset:offset,
          cat: cat
        }).then(res => {
          // console.log(res.playlists);
          this.song = res.playlists
          this.listtotal=res.total
        })
      }
    }
  }
</script>

<style scoped lang="less">
  // 组件样式
  .el-dropdown {
    vertical-align: top;
  }
   
  .el-pagination {
    margin: 0 300px;
  }

  .el-dropdown+.el-dropdown {
    margin-left: 15px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .songlist {
    .hot {
      margin-top: 10px;
      cursor: pointer;

      .red {
        color: red;
      }
    }

    .song-list {
      .music-list {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 56px;

        .item {
          position: relative;
          // display: flex;
          width: 200px;
          height: 250px;
          overflow: hidden;
          margin-right: 18px;
          margin-bottom: 10px;
          cursor: pointer;

          img {
            width: 100%;
            height: 200px;

          }

          .play {
            position: absolute;
            top: 130px;
            right: 10px;
            transform: translateX(55px);
            transition: transform .3s;
            color: red;
            font-size: 45px;
          }
        }

        .item:hover .play {
          transform: translateX(0px);
        }

      }
      // .fenye {
      // }

    }
  }
</style>